<template>
	<view class="container bottom-ios">
		<uni-nav-bar v-if="!user.isFirstRegistration" class="ch-nav" height="88rpx" backgroundColor="#FFFFFF" leftWidth="180rpx" rightWidth="180rpx" color="#333333" :fixed="true" :padding="false" :border="true" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">添加联赛</text>
			<template slot="right">
				<view class="right-text flex-r ac" @tap="submit">
					<text class="text-primary" :class="isSelectSeason.length > 0 ? 'color-blue' : 'color-grey'">确定</text>
				</view>
			</template>
		</uni-nav-bar>
		<view class="head flex-c ac">
			<image class="bg-img inheritwh" src="@/public/images/other/t_bg.png" mode="widthFix"></image>
			<text class="head-title color-primary text-bold">让我们更了解您，推荐更精彩</text>
			<text class="head-info text-secondary mt20">您对哪些联赛感兴趣?</text>
		</view>
		<view class="body flex-c ac" :class="{'no-foot': !user.isFirstRegistration}" v-if="seasonList.length > 0">
			<template v-for="(season, sportIndex) in seasonList">
				<view class="season flex-c ac" :key="season.sportId" v-if="season.compModelRows && season.compModelRows[0]">
					<view class="season-title flex-r ac">
						<image class="left-icon" :src="require('@/public/images/other/t_'+season.sportId+'.png')" mode="widthFix"></image>
						<text class="text-large">{{season.sportId == 1 ? '足球' : '篮球'}}联赛推荐</text>
						<image class="right-icon" :src="require('@/public/images/other/t_'+season.sportId+'.png')" mode="widthFix"></image>
					</view>
					<view class="season-list flex-r ac">
						<button class="season-item flex-r ac jc" v-for="(item, index) in season.compModelRows" :key="index" :class="{'active': item.isSelect}" @tap="selectSeason(item)">
							<text class="text-secondary text-hidden">{{item.compName}}</text>
						</button>
					</view>
				</view>
			</template>
		</view>
		<view class="foot flex-r ac" v-if="user.isFirstRegistration">
			<button class="button flex-r ac jc" @tap="skip">跳过</button>
			<button class="button flex-r ac jc active" @tap="submit">确定{{' ('+isSelectSeason.length+')'}}</button>
		</view>
		<view class="full-screen flex-r ac jc" v-if="showToast">
			<view class="success flex-c ac bounceout">
				<image class="bgimg" src="@/public/images/other/q_bg-ys.png" mode="widthFix"></image>
				<image class="titleimg" src="@/public/images/other/zt-ys.png" mode="widthFix"></image>
				<view class="coupon-list flex-c ac">
					<image
						class="couponimg mt20" 
						src="@/public/images/other/yhq-ys.png" 
						mode="widthFix"
						v-for="item in 3" :key="item"
					></image>
				</view>
				<image class="btnimg" src="@/public/images/other/newan-ys.png" mode="widthFix" @tap="showToast = false"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				seasonList: [],
				isSelectSeason: [],
				showToast: false
			};
		},
		computed: {
			user() {
				return this.$store.state.user
			}
		},
		onLoad() {
			this.getRecommendSeason();
			if(this.user.awardStatus === true){
				this.showToast = true
				this.$store.commit('UPDATE_USERINFO', { awardStatus: false });
			}
		},
		methods: {
			//跳过
			skip() {
				if(this.user.isFirstRegistration){
					//回跳地址
					let redirectTo = this.$CHS.getRedirectTo()
					if(redirectTo && redirectTo.name != 'followseason'){
						this.$Router.replaceAll(redirectTo)
					}else{
						this.$Router.replaceAll({name: 'index'})
					}
				}else{
					//正常返回
					let pages = getCurrentPages()
					let len = pages.length
					if(len > 1){
						let page = pages[len - 2]
						if(page && page.userId == this.user.userId && page.getMemberInfo){
							setTimeout(()=>{
								page.getMemberInfo()
							}, 500)
						}
					}
					this.$goBack(1);
				}
			},
			//提交
			submit() {
				if(this.isSelectSeason.length > 0){
					this.$http.post({
						url: '/api/appUser/saveUserCareComp',
						data: {
							careComp: this.isSelectSeason,
							userId: this.user.userId
						}
					}).then((data)=>{
						console.log(data);
						if(data.success){
							//信息提示
							uni.showToast({
								title: data.message || '提交成功',
								icon: 'success'
							})
							//更新用户状态
							setTimeout(()=>{
								this.skip()
							}, 800);
						}else{
							uni.showToast({
								title: data.message || '提交失败，请重试',
								icon: 'none'
							})
						}
					}).catch((error)=>{
						console.log(error);
					})
				}else{
					uni.showToast({
						title: '请选择您感兴趣的联赛',
						icon: 'none'
					})
				}
			},
			//查询推荐关注联赛
			getRecommendSeason() {
				this.$http.get({
					url: '/api/appUser/queryRecommendCompRows',
					data: {
						userId: this.user.userId
					}
				}).then((data)=>{
					console.log(data);
					if(data.success && data.result){
						this.seasonList = data.result
						for(let sport of this.seasonList){
							if(sport.compModelRows && sport.compModelRows[0]){
								for(let season of sport.compModelRows){
									if(season.isSelect){
										this.isSelectSeason.push({
											compId: season.compId,
											compName: season.compName,
											sportId:season.sportId,
											userId: this.user.userId
										});
									}
								}
							}
						}
					}else{
						uni.showToast({
							title: data.message || '数据加载失败，请重试',
							icon: 'none'
						})
					}
				}).catch((error)=>{
					console.log(error);
				})
			},
			//选择联赛
			selectSeason(season) {
				if(season.isSelect == 1){
					this.isSelectSeason = this.isSelectSeason.filter(item => {
						return item.compId != season.compId || item.sportId != season.sportId
					})
					season.isSelect = 0
				}else{
					this.isSelectSeason.push({
						compId: season.compId,
						compName: season.compName,
						sportId: season.sportId,
						userId: this.user.userId
					});
					season.isSelect = 1
				}
				console.log(this.isSelectSeason);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		.ch-nav{
			.right-text{
				justify-content: flex-end;
				margin-right: 20rpx;
				width: 100rpx;
				height: 80rpx;
			}
		}
		.head{
			position: relative;
			width: 100%;
			height: 440rpx;
			.bg-img{
				background: linear-gradient(0deg, rgba(217,229,255,0) 0%, #D9E5FF 100%);
				position: absolute;
				top: -40rpx;
				z-index: 1;
			}
			.head-title{
				margin-top: 47rpx;
				font-size: 36rpx;
				z-index: 2;
			}
			.head-info{
				color: #3377FF;
				z-index: 2;
			}
		}
		.body{
			position: relative;
			width: 100%;
			margin-top: -272rpx;
			padding: 0 20rpx;
			padding-bottom: calc(20rpx + 120rpx);
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			box-sizing: border-box;
			z-index: 2;
			&.no-foot{
				padding-bottom: 20rpx;
			}
			.season{
				margin-top: 40rpx;
				.season-title{
					.left-icon, .right-icon{
						width: 244rpx;
					}
					.right-icon{
						transform: scaleX(-1);
					}
					.text-large{
						font-weight: 500;
						margin: 0 10rpx;
					}
				}
				.season-list{
					flex-wrap: wrap;
					.season-item{
						position: relative;
						margin: 20rpx 20rpx 0 0;
						padding: 0;
						width: 222rpx;
						height: 72rpx;
						background: #FFFFFF;
						//border: 1rpx solid #B3B3B3;
						border-radius: 36rpx;
						box-sizing: border-box;
						.text-hidden{
							max-width: 130rpx;
							line-height: 1.2;
						}
						&.active{
							background: #4D88FF;
							color: #FFFFFF;
							&::after{
								border: none;
							}
						}
						&::after{
							content: "";
							position: absolute;
							top: 0;
							left: 0;
							width: 200%;
							height: 200%;
							border: 1px solid #B3B3B3;
							border-radius: 72rpx;
							transform-origin: 0 0;
							transform: scale(0.5);
						}
					}
					.season-item:nth-child(3n){
						margin-right: 0;
					}
				}
			}
		}
		.foot{
			max-width: $max-width;
			margin: $pc-margin;
			justify-content: space-evenly;
			width: 100%;
			background: #FFFFFF;
			border-top: 1rpx solid #EDEDED;
			box-sizing: border-box;
			padding-bottom: var(--safe-area-inset-bottom);
			position: fixed;
			bottom: 0;
			z-index: 2;
			.button{
				margin: 12rpx 0;
				padding: 0;
				width: 345rpx;
				height: 96rpx;
				background: #FFFFFF;
				border: 2rpx solid #CCCCCC;
				border-radius: 48rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				line-height: 1;
				color: #666666;
				&.active{
					background: #0055FF;
					border: none;
					color: #FFFFFF;
				}
			}
		}
		.full-screen{
			z-index: 997;
			touch-action: none;
			.success{
				position: relative;
				.bgimg{
					width: 660rpx;
				}
				.titleimg{
					width: 555rpx;
					position: absolute;
					top: 75rpx;
				}
				.coupon-list{
					position: absolute;
					top: 215rpx;
					.couponimg{
						width: 580rpx;
						&:first-child{
							margin-top: 0;
						}
					}
				}
				.btnimg{
					width: 598rpx;
					position: absolute;
					bottom: 60rpx;
				}
			}
		}
		.bounceout{
			animation-duration: 0.4s;
			animation-fill-mode: both;
			animation-name: showAnimation;
		}
	}
	@keyframes showAnimation {
		0% {
			opacity: 0;
			transform: scale(0.1);
		}
		100% {
			opacity: 1;
			transform: scale(1);
		}
	}
</style>
